<script lang="ts" setup>
import {onMounted, reactive, ref, type UnwrapRef} from 'vue';
import {useRoute} from "vue-router";
import {queryReportDetailAPI, updateReportAPI} from "@/apis/report.ts";
import {message} from "ant-design-vue";
import router from "@/router";
import {addNewAPI} from "@/apis/new.ts";
import {useInfoStore} from "@/store/user/user.ts";

//表单数据
interface FormState {
  reportId: string;
  reportCheckStatus: string,
  reportCheckRemark: string,
  reportUserId: string,
  reportUserRole: string,
  reportUsername: string,
  reportAccount: string,
  reportContact: string,
  reportObjectId: string
  reportObject: string,
  reportDescribe: string,
  reportFileList: string,
}

const formState: UnwrapRef<FormState> = reactive({
  reportId: '',
  reportCheckStatus: '',
  reportCheckRemark: '',
  reportUserId: '',
  reportUserRole: '',
  reportUsername: '',
  reportAccount: '',
  reportContact: '',
  reportObjectId: '',
  reportObject: '',
  reportDescribe: '',
  reportFileList: ''
});


//接收参数
const route = useRoute();
//生命周期
onMounted(() => {
  formState.reportId = route.params.reportId as string;
  getReportInfo()
})
//获取岗位信息
const getReportInfo = async () => {
  if (formState.reportId) {
    const res = await queryReportDetailAPI({
      reportId: formState.reportId
    })
    if (res.data.flag) {
      formState.reportId = res.data.data.reportId;
      formState.reportCheckStatus = res.data.data.reportCheckStatus;
      formState.reportCheckRemark = res.data.data.reportCheckRemark;
      formState.reportUserId = res.data.data.reportUserId;
      formState.reportUserRole = res.data.data.reportUserRole;
      formState.reportUsername = res.data.data.reportUsername;
      formState.reportAccount = res.data.data.reportAccount;
      formState.reportContact = res.data.data.reportContact;
      formState.reportObjectId = res.data.data.reportObjectId;
      formState.reportObject = res.data.data.reportObject;
      formState.reportDescribe = res.data.data.reportDescribe;
      formState.reportFileList = res.data.data.reportFileList;
    }
  }
}

//审核-通过
const userStore = useInfoStore().userInfo;
const accept = () => {
  updateReportAPI({
    reportId: formState.reportId,
    reportCheckStatus: '已通过',
  }).then(res => {
    if (res.data.flag) {
      message.success('审核成功')
      //发出认证成功的消息
      addNewAPI({
        newCreatorId: userStore.userId,
        newReceiverId: formState.reportUserId,
        newCreatorName: userStore.userName,
        newCreatorAvatar: userStore.userAvatarUrl,
        newReceiverName: formState.reportUsername,
        newTitle: '举报审核通过',
        newText: '您的举报信息已通过审核，请前往我的投诉查看',
      })
      router.go(-1)
    } else {
      message.error(res.data.message)
    }
  })
};
//审核-不通过
const refuse = () => {
  open.value = true;
};
//审核不通过弹窗
const open = ref<boolean>(false);
const handleOk = async () => {
  if (formState.reportCheckRemark === null) {
    message.error('请填写拒绝原因')
    return
  } else {
    updateReportAPI({
      reportId: formState.reportId,
      reportCheckStatus: '已拒绝',
      reportCheckRemark: formState.reportCheckRemark,
    }).then(res => {
      if (res.data.flag) {
        message.success('拒绝成功')
        //发出认证失败的消息
        addNewAPI({
          newCreatorId: userStore.userId,
          newReceiverId: formState.reportUserId,
          newCreatorName: userStore.userName,
          newCreatorAvatar: userStore.userAvatarUrl,
          newReceiverName: formState.reportUsername,
          newTitle: '举报审核失败了',
          newText: '您的举报信息未通过，失败原因:'+formState.reportCheckRemark,
        })
        getReportInfo()
      }
    })
  }
  open.value = false;
};

</script>
<template>
  <div class="jobAndEmployerDetail">
    <div class="top">
      <a-page-header
          sub-title="投诉详情表单"
          title="返回"
          @back="() => $router.go(-1)"
      />
    </div>
    <div class="bottom">

        <div style="display: flex;padding-top: 30px">
          <div>
            <a-descriptions :title="'投诉类型：'+formState.reportObject">
              <a-descriptions-item label="投诉状态">{{ formState.reportCheckStatus }}</a-descriptions-item>
              <a-descriptions-item :span="2" label="投诉者角色">
                {{ formState.reportUserRole === 'jobseeker' ? '求职者' : '企业' }}
              </a-descriptions-item>
              <a-descriptions-item :span="1" label="投诉者昵称">
                {{ formState.reportUsername }}
              </a-descriptions-item>
              <a-descriptions-item :span="1" label="投诉者账号">
                {{ formState.reportAccount }}
              </a-descriptions-item>
              <a-descriptions-item :span="1" label="投诉者电话">
                {{ formState.reportContact }}
              </a-descriptions-item>
              <a-descriptions-item :span="3" label="投诉描述">
                {{ formState.reportDescribe }}
              </a-descriptions-item>
              <a-descriptions-item :span="3" label="佐证信息">
                <div class="file-list">
                  <div v-for="(file, index) in formState.reportFileList" :key="index">
                    <a :href="'http://localhost:8080/file/download?name='+file" download>{{ file }}</a>
                  </div>
                </div>
              </a-descriptions-item>
            </a-descriptions>
            <div v-if="formState.reportCheckStatus === '审核中'" class="check-button">
              <a-button style="margin-right: 20px" type="primary" @click="accept">审核-通过</a-button>
              <a-button danger style="margin-right: 20px" type="primary" @click="refuse">审核-不通过</a-button>

              <!--          不通过弹窗-->
              <div>
                <a-modal v-model:open="open"
                         :title="formState.reportObject+'-审核-不通过原因'"
                         cancelText="取消"
                         okText="确认拒绝"
                         @ok="handleOk">
                  <div style="width: 400px">
                    <a-form
                        ref="formRefVerification"
                        :model="formState"
                    >
                      <a-form-item>
                        <a-textarea v-model:value="formState.reportCheckRemark"
                                    :auto-size="{minRows: 5, maxRows: 10}"
                                    :maxlength="500"
                                    show-count
                                    style="width: 400px"/>
                      </a-form-item>

                    </a-form>
                  </div>
                </a-modal>
              </div>

            </div>
          </div>
        </div>
    </div>

  </div>
</template>

<style scoped>
.jobAndEmployerDetail {
  padding: 10px;
  height: 750px;
  width: 70%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .top {
    border-bottom: 1px solid #ccc;
  }

  .bottom {
    padding: 10px 50px 50px;

    .file-list {
      display: flex;
      flex-direction: column; /* 设置为垂直方向排列 */
      gap: 8px; /* 设置元素之间的间距 */
    }
  }
}


</style>
